<template>
  <div>
    <div class="main-wrap">

      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">支付密码</strong> / <small>Password</small></div>
      </div>
      <hr />
      <!--进度条-->
      <div class="m-progress">
        <div class="m-progress-list">
          <span class="step-1 step">
            <em class="u-progress-stage-bg"></em>
            <i class="u-stage-icon-inner">1<em class="bg"></em></i>
            <p class="stage-name">重置密码</p>
          </span>
          <span class="step-2 step">
            <em class="u-progress-stage-bg"></em>
            <i class="u-stage-icon-inner">2<em class="bg"></em></i>
            <p class="stage-name">完成</p>
          </span>
          <span class="u-progress-placeholder"></span>
        </div>
        <div class="u-progress-bar total-steps-2">
          <div class="u-progress-bar-inner"></div>
        </div>
      </div>
      <form class="am-form am-form-horizontal">
        <div class="am-form-group" v-if="hasOld">
          <label for="user-old-password" class="am-form-label">原密码</label>
          <div class="am-form-content">
            <input type="password" id="user-old-password" placeholder="请输入原支付密码"  v-model="old">
          </div>
        </div>
        <div class="am-form-group">
          <label for="user-new-password" class="am-form-label" v-if="hasOld">新密码</label>
          <label for="user-new-password" class="am-form-label" v-if="!hasOld">支付密码</label>
          <div class="am-form-content">
            <input type="password" id="user-new-password" placeholder="由数字、字母组合"  v-model="now" @change="validate()">
            <b v-if="nowmsg" style="color:red">{{nowmsg}}</b>
          </div>
        </div>
        <div class="am-form-group">
          <label for="user-confirm-password" class="am-form-label">确认密码</label>
          <div class="am-form-content">
            <input type="password" id="user-confirm-password" placeholder="请再次输入上面的密码"  v-model="now2">
             <b v-if="now!='' && now!=now2" style="color:red">密码不一致</b>
          </div>
        </div>
        <div class="info-btn">
          <div class="am-btn am-btn-danger" v-on:click="restPayPwd()">保存修改</div>
        </div>

      </form>

    </div>
  </div>
</template>
<script>
export default {
  name: 'paypwd',
  data () {
    return {
      hasOld:true,
      old:"",
      now:"",
      now2:"",
      nowmsg:null
    }
  },
  components: {

  },
  mounted () {
    this.axios.get("/user/hasPaypwd").then((res)=>{
      var result = res.data;
      if(result.code == 200){
        this.hasOld = true;
      }else{
        this.hasOld = false;
      }
    })
  },
  methods: {
    validate(){
      if (!/^\d{6}$/.test(this.now)) {
        this.nowmsg="支付密码为6位数字"
      }else{
        this.nowmsg=null;
      }
    },
    restPayPwd(){
      if (!/^\d{6}$/.test(this.now)) {
        this.$layer.msg("支付密码为6位数字");
        return;
      }
       if(this.now!=this.now2){
        this.$layer.msg("密码不一致");
        return;
      }
      this.axios.put("/user/payPassword",{
        old:this.$md5(this.old),
        now:this.$md5(this.now)
      }).then((res) => {
        var result = res.data;
        if(result.code==200){
          this.$layer.msg("支付密码修改成功");
          this.$router.push({
            name:'securityli'
          })
        }else{
          this.$layer.msg((result.msg==null||""?"修改失败":result.msg))
        }
      })
    }
  }
}
</script>
<style scoped>
@import "../../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../../assets/css/personal.css";
@import "../../../../assets/css/stepstyle.css";
</style>
